<template>
  <div class="contain">
    <div class="header">
      <!-- <h1>{{title}}</h1> -->
    </div>
    <el-form :model="form" ref="queryForm" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="缩略图" prop="logoImg">
        <el-upload 
        class="avatar-uploader" 
        :action="uploadUrl" 
        :headers="uploadFileHeader"
        :show-file-list="false" 
        :on-success="uploadSuccess">
            <el-image v-if="form.logoImg" :src="form.logoImg" fit="cover" style="width:200px;height:200px;"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- <div slot="tip" class="el-upload__tip">建议尺寸674*206px</div> -->
        </el-upload>
      </el-form-item>
      <el-form-item label="内容" prop="content">
          <editor v-model="form.content" :min-height="192" />
      </el-form-item>
      <el-form-item label="类型" prop="sign">
        <el-radio-group v-model="form.sign" size="small">
          <el-radio label="0" border v-if="form.sign == 0">小程序文章</el-radio>
          <el-radio label="1" border v-else-if="form.sign == 1">园区文章</el-radio>
          <el-radio label="2" border v-else-if="form.sign == 2">企业文章</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="绑定园区" prop="gardenId" v-if="form.sign == 1">
        <el-radio-group v-model="parkDetail.gardenName" size="small">
          <el-radio :label="parkDetail.gardenName" border>{{parkDetail.gardenName}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { creatArticleList, getArticleDetail, editArticleList, getParkDetail } from "@/api/eh-api";
import { getToken } from "@/utils/auth";
import Editor from '@/components/Editor';  //富文本
export default {
  components:{ Editor },
  data() {
    return {
      title:'添加',
      uploadUrl:'',
      form: {
        sign: "0", //0:小程序文章 1：园区文章
        title: "",
        content: "",
        logoImg: "",
        gardenId: "",
        enterpriseId:"",
      },
      parkDetail:'',
    };
  },
  created(options) {
    //文件上传公共
    this.uploadUrl = process.env.VUE_APP_BASE_API + '/wx/appletFeedback/uploadimg'
    this.uploadFileHeader = {Authorization : "Bearer " + getToken()}

    //路由类型
    if( this.$route.query && this.$route.query.parkId ){ //园区管理跳转过来
      this.form.gardenId = this.$route.query.parkId
      this.form.sign = '1'
      this.getParkDetail(this.$route.query.parkId)
    }else if(this.$route.query && this.$route.query.enterpriseId){ //企业管理跳转过来
      this.form.enterpriseId = this.$route.query.enterpriseId
      this.form.sign = '2'
    }else{
      this.form.sign = '0'
    }

    //是否编辑
    if( this.$route.query && this.$route.query.id ){
      this.title = '编辑'
      this.getArticleDetail()
    }

  },
  methods: {
    /**
     * 上传图片
     */
    uploadSuccess:function(res, file, fileList) {
      if( res.code == 200 ){
        this.form.logoImg = res.data.url
      }else{
        this.$message.error(res.msg);
      }
    },

    /**
     * 表单提交
     */
    submit:function(params) {
      if( this.form.sign == 0 ){
        delete this.form.gardenId
        // console.log( this.form.gardenId )
      }
      if( this.$route.query && this.$route.query.id ){
        this.edittItem()
      }else{
        this.creatItem()
      }
    },

    /**
     * 添加
     */
    creatItem: function () {
      console.log(this.form)
      creatArticleList(this.form).then((res) => {
        if( res.code == 200 ){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.$router.back()
        }else{
          this.$message.error(res.msg);
        }
      });
    },

    /**
     * 编辑
     */
    edittItem: function () {
      editArticleList(this.form).then((res) => {
        if( res.code == 200 ){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.$router.back()
        }else{
          this.$message.error(res.msg);
        }
      });
    },

    /**
     * 获取文章详情
     */
    getArticleDetail:function() {
        let that = this
        getArticleDetail({
          id:that.$route.query.id
        }).then( res => {
            if( res.code == 200 ){
              that.form = res.data
              //是否园区文章
              if( res.data.gardenId ){
                this.getParkDetail(res.data.gardenId)
              }
            }else{
              this.$message.error(res.msg);
            }
        })
    },

    /**
     * 获取列表
     */
    getParkDetail(id) {
      getParkDetail({
        id: id
      }).then(res => {
        console.log(res)
          this.parkDetail = res.data;
        })
        .catch(() => {
          this.$message.error('园区信息加载失败，请稍后重试');
        });
    },
  },
};
</script>
<style lang="scss" scoped>
/**头像 */
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
}
.avatar {
    width: 128px;
    height: 128px;
    display: block;
}
</style>
